<template>
  <div class="login">
    <div class="layout-text">
      <div class="layout-header">
        <div class="layout-header-left">
          <img class="image-100" src="@/assets/images/login.png" alt="" />
        </div>
        <div class="layout-header-content">
          <div
            class="header-tab"
            v-for="(item, index) in toolValue"
            :key="index"
          >
            <div :class="['header-tab-name']">
              {{ item.title }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="login-bg">
      <div class="login-item margin-1200">
        <div class="login-item-img">
          <img class="image-100" src="@/assets/images/login_bg.png" alt="" />
        </div>
        <!-- 登录 -->
        <div class="login-item-content" v-if="type == 1">
          <div class="login-item-content-title">登录账号</div>
          <div class="login-item-content-account">
            <el-input v-model="account" placeholder="请输入账号"></el-input>
          </div>
          <div class="login-item-content-account">
            <el-input
              v-model="password"
              show-password
              placeholder="请输入密码"
            ></el-input>
          </div>
          <!-- 忘记密码区域 -->
          <div class="login-content-account-pass">
            <div class="account-checkbox">
              <el-checkbox v-model="isAccount">记住账号</el-checkbox>
              <el-checkbox v-model="isPassword">记住密码</el-checkbox>
            </div>
            <div class="account-password">
              <span @click="type = 2">忘记密码</span>
              <span class="account-password-strikethrough">|</span>
              <span @click="type = 3">账号注册</span>
            </div>
          </div>
          <!-- 登录按钮 -->
          <div class="login-button" @click="onSubmitRegister">
            <div class="login-button-config">登录</div>
          </div>
        </div>
        <!-- 忘记密码 -->
        <div class="forget-pass" v-else>
          <div class="forget-pass-title" v-if="type == 2">忘记密码</div>
          <div class="forget-pass-title" v-if="type == 3">注册账号</div>
          <div class="forget-pass-user-name" v-if="type == 3">
            <el-input
              v-model="userName"
              placeholder="请填写您的用户名"
            ></el-input>
          </div>
          <div class="forget-pass-phone">
            <el-select v-model="selectPhoneValue" placeholder="请选择">
              <el-option
                v-for="item in selectPhone"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <input
              type="text"
              class="custom-input"
              :maxlength="11"
              @change="onPhoneChange"
              v-model="phoneValue"
              placeholder="请输入电话号码"
            />
          </div>
          <div class="forget-pass-code">
            <input
              type="text"
              class="custom-input"
              v-model="code"
              placeholder="请输入验证码"
            />
            <div class="forget-pass-code-buttom" @click="onSendCode">
              获取验证码
            </div>
          </div>
          <div class="forget-pass-password">
            <el-input
              v-model="newPassword"
              show-password
              placeholder="请输入新的密码"
            ></el-input>
          </div>
          <div class="forget-pass-password">
            <el-input
              v-model="confirmPassword"
              show-password
              placeholder="请确定密码"
            ></el-input>
          </div>
          <div class="forget-pass-submit" @click="onSubmitRegister">
            <div class="forget-pass-submit-config">登录</div>
          </div>
        </div>
      </div>
    </div>
    <!-- floor 区域 -->
    <div class="login-item-floor">备案号： ⓒ Copyright 515548</div>
  </div>
</template>

<script>
import Account from '@/api/account';
import Way from '@/utils/way';
import CryptoJS from '@/utils/crypto';

export default {
  name: 'loginFather',
  components: {},
  props: {},
  data() {
    return {
      toolValue: [
        { title: '首页', path: 'mall' },
        { title: '产品市场', path: 'product' },
        { title: '素材市场', path: '' },
        { title: '定制产品', path: '' },
        { title: '管理设置', path: '' },
      ],
      account: '', // 账号
      password: '', // 密码
      isAccount: false, // 是否记住账号
      isPassword: false, // 是否记住密码
      type: 1, // 1 登录 ； 2 忘记密码 ； 3 注册账号
      selectPhone: [
        {
          value: 1,
          label: '+86',
        },
      ],
      selectPhoneValue: 1, // 选择电话类型
      phoneValue: '', // 电话号码
      userName: '', // 用户名
      forgetPhone: '', // 电话号码
      code: '', // 获取验证码
      newPassword: '', // 新密码
      confirmPassword: '', // 确实密码
    };
  },
  computed: {},
  watch: {},
  created() {
    this.init();
  },
  methods: {
    // 初始化数据
    init() {
      let user = localStorage.getItem('user');
      const that = this;
      if (user) {
        user = JSON.parse(user);
        that.account = user.account;
        that.password = CryptoJS.decrypt(user.password);
        that.isAccount = user.account == '' ? false : true;
        that.isPassword = user.password == '' ? false : true;
      }
    },
    // 输入电话号码change事件
    onPhoneChange() {
      const phoneValue = this.phoneValue;
      !Way.setCheckPhone(phoneValue) && Way.setMessage('电话号码错误！！！', 2);
      console.log(Way.setCheckPhone(phoneValue));
    },

    // 登录/注册
    onSubmitRegister() {
      const that = this;
      let params = {};
      let user = {};

      // 登录
      if (that.type == 1) {
        params.user_name = that.account;
        params.password = that.password;
        Account.login(params).then((res) => {
          if (res.code == 200) {
            // 是否记住账号
            user.account = that.isAccount ? that.account : '';
            user.password = that.isPassword
              ? CryptoJS.encrypt(that.password)
              : '';

            localStorage.setItem('userInfo', JSON.stringify(res.data));
            localStorage.setItem('user', JSON.stringify(user));

            Way.setMessage('登录成功', 1);
            that.$router.replace({ name: 'mall' });
            // that.$router.replace({ name: 'mall' });
          } else {
            Way.setMessage(res.msg, 2);
          }
        });
        // 忘记密码
      } else if (that.type == 2) {
        if (that.newPassword != that.confirmPassword) {
          return Way.setMessage('密码不一致', 2);
        }
        params.mobile = that.phoneValue;
        params.password = that.newPassword;
        params.verify_code = that.code;
        Account.forgetPassword(params).then((res) => {
          if (res.code == 200) {
            Way.setMessage('修改密码成功', 1);
            that.type = 1;
          } else {
            Way.setMessage(res.msg, 3);
          }
        });
        // 注册账号
      } else if (that.type == 3) {
        console.log(42);
        if (that.newPassword != that.confirmPassword) {
          return Way.setMessage('密码不一致', 2);
        }
        params.mobile = that.phoneValue;
        params.user_name = that.userName;
        params.password = that.newPassword;
        params.verify_code = that.code;

        Account.register(params).then((res) => {
          console.log(res);
          if (res.code == 200) {
            Way.setMessage('注册成功', 1);
            that.account = that.userName;
            that.type = 1;
          } else {
            Way.setMessage(res.msg, 3);
          }
        });
      }
    },

    // 发送短信
    onSendCode() {
      const that = this;
      let code = 1;
      code = that.type == 3 && 1;
      code = that.type == 2 && 2;
      const param = {
        mobile: that.phoneValue,
        code: code,
      };
      Account.sendCode(param).then((res) => {
        if (res.code == 200) {
          Way.setMessage('发送验证码成功', 1);
        } else {
          Way.setMessage(res.msg, 2);
        }
      });
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
@import './login.less';
</style>
